<template>
    <div class="homeImg" v-if="message && message">
        <div class="u7064_div">
            <div class="u7064_div1">
                <img :src="message.img" alt="" class="u1064_img" style="width: 65px;height: 65px;">
                <div class="status"
                    :style="[!message.followers.some(flag => flag == user._id) ? { backgroundColor: '#e6f4ff' } : { backgroundColor: '#eee', color: '#7777' }]"
                    @click="changeStatus(message._id)">
                    {{
                        message.followers.some(flag => flag == user._id) ? "已关注" : "关注"
                    }}
                </div>
            </div>

            <div class="marg">
                <p class="font20">{{ message.name }}</p>
                <p class="font-12" style="font-size:12px;padding: 5px;background-color: #e6f4ff;color: #1677ff;">{{
                    message.job }}
                </p>
            </div>
            <div class="u7064_div_text">
                <p class="">{{ message.child }}</p>

                <!-- <p class="font-12">{{ message.hospital.name }}</p> -->
            </div>
            <div class="u7064_div_text2">
                <div class="u7064_div_text2_1">
                    <div style="width: 5px;height: 5px;background-color:#1677ff ;border-radius: 5px;"></div>
                    <p class="font-14">{{ 12.6 }}W</p>
                    <p class='font12'>接诊</p>
                </div>
                <div class="u7064_div_text2_1">
                    <div style="width: 5px;height: 5px;background-color:#1677ff ;border-radius: 5px;"></div>
                    <p class="font-14">6.6W</p>
                    <p class='font12'>获赞</p>
                </div>
                <div class="u7064_div_text2_1">
                    <div style="width: 5px;height: 5px;background-color:#1677ff ;border-radius: 5px;"></div>
                    <p class="font-14">5.0W</p>
                    <p class='font12'>患者评分</p>
                </div>

            </div>
        </div>
        <div class="u7064_divBox2">
            <div class="u7064_divBox2_1">
                <img style="width: 16px;height: 16px;"
                    src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E4%B8%BB%E9%A1%B5/u7076.svg"
                    alt="">
                <p style="font-weight: 700;">个人简介</p>
            </div>
            <p class="font13" style="margin-top: 15px;">{{ message.intro }}</p>
        </div>
        <div class="u7064_divBox2">
            <div class="u7064_divBox2_1">
                <img style="width: 16px;height: 16px;"
                    src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E4%B8%BB%E9%A1%B5/u7095.svg"
                    alt="">
                <p style="font-weight: 700;">擅长方向</p>
            </div>
            <p class="font13" style="margin-top: 15px;">{{ message.good }}</p>
        </div>
        <div class="u7064_divBox2">
            <div class="u7064_divBox2_1">
                <img style="width: 16px;height: 16px;"
                    src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E4%B8%BB%E9%A1%B5/u7101.svg"
                    alt="">
                <p style="font-weight: 700;">荣誉方向</p>
            </div>
            <p class="font13" style="margin-top: 15px;">{{ message.honor }}</p>
        </div>
        <!-- <div class="u7064_divBox2">
            <div class="u7064_divBox2_1">
                <img style="width: 16px;height: 16px;"
                    src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E4%B8%BB%E9%A1%B5/u7107.svg"
                    alt="">
                <p style="font-weight: 700;">执业点</p>
            </div>
            <p class="font13" style="margin-top: 15px;">{{ message.honor }}</p>
        </div> -->
        <div class="u7064_divBox2">
            <div class="u7064_divBox2_12">
                <div style="display: flex;align-items: center;gap: 10px;">
                    <img style="width: 16px;height: 16px;"
                        src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E4%B8%BB%E9%A1%B5/u7118.svg"
                        alt="">
                    <p style="font-weight: 700;">锦旗</p>
                </div>
                <div style="display: flex;align-items: center;" @click="toFlag">
                    <span style="font-size: 13px;">查看更多</span>
                    <img style="width: 16px;height: 16px;"
                        src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E4%B8%BB%E9%A1%B5/u7110.svg"
                        alt="">
                </div>

            </div>
            <div class="u7064_divBox2_22">
                <div class="imgBox" v-for="v in message.flag" :key="v._id">
                    <p class="u7121"> {{ v.title }}</p>
                </div>
            </div>
        </div>
        <div class="u7064_divBox2">
            <div class="u7064_divBox2_12">
                <div style="display: flex;align-items: center;gap: 10px;">
                    <img style="width: 16px;height: 16px;"
                        src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E4%B8%BB%E9%A1%B5/u7139.svg"
                        alt="">
                    <p style="font-weight: 700;">患者评价</p>
                </div>
                <div style="display: flex;align-items: center;">
                    <span style="font-size: 13px;">查看更多</span>
                    <img style="width: 16px;height: 16px;"
                        src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E4%B8%BB%E9%A1%B5/u7110.svg"
                        alt="">
                </div>
            </div>
            <div class="imgTextBox" style="margin-top: 10px">
                <div class="imgTextBox1">
                    <div>
                        <img :src="user.Image" alt="" class="messageImg">
                        &nbsp;&nbsp;
                        <span>{{ user.name }}</span>
                    </div>
                    <div style="padding-left: 40px;">
                        <textarea ref="textAreaRef" class="textarea" @focus="changfocus" @blur="changblur"
                            v-model="textArea" name="" id="" placeholder="输入评论"></textarea>
                    </div>

                </div>
                <div class="sendBox" v-if="disabled">
                    <van-button type="primary" class="sendSubmit" @mousedown="sendContent()">发表评论</van-button>
                </div>
                <p>全部评论</p>
                <!-- --------------------------- -->
                <div style="min-height: 100px;margin-top: 10px;" v-for="v in messList" :key="v">
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                        <div>
                            <img :src="v.aratar" alt="" class="messageImg">
                            &nbsp;
                            <span>{{ v.name }}</span>
                        </div>

                        <span>{{ dayjs(v.created_at).format('YYYY-MM-DD HH:mm:ss') }}</span>
                    </div>
                    <div style="padding-left: 40px;">
                        <span>
                            {{ v.content }}
                        </span>
                    </div>
                    <div style="padding-left:40px;margin-top: 10px;">
                        <div style="display: flex;gap: 5px; align-items: center;">
                            <span @click="changlikes(v._id, v.likes)" v-if="v.likes.some(flag => flag == user._id)">
                                <img style="width: 15px;" src="../../../assets/official/点赞1.png" alt="">
                                {{ v.likes.length }}
                            </span>
                            <span @click="changlikes(v._id, v.likes)" v-else>
                                <img style="width: 15px;" src="../../../assets/official/点赞.png" alt="">
                                {{ v.likes.length }}
                            </span>


                            <img style="width: 20px;" src="../../../assets/official/回复.png" alt="" @click="clickBtn(v)">
                            <p v-if="child_id == v._id" @click="clickBtn(v)">
                                {{ child_id == v._id ? '取消回复' : '回复' }}
                            </p>
                            <p v-else @click="clickBtn(v)">
                                {{ child_id !== v._id ? '回复' : '取消回复' }}
                            </p>
                        </div>

                        <span>
                            <div v-if="child_id == v._id">
                                <div class="imgTextBox1">

                                    <textarea class="textarea" v-model="textArea" name="" id=""
                                        placeholder="输入评论"></textarea>
                                </div>
                                <div class="sendBox">
                                    <van-button type="primary" class="sendSubmit"
                                        @click="sendContent()">发表评论</van-button>
                                </div>
                            </div>

                        </span>
                        <div class="contentmessage" style="margin-top: 10px;" v-for="child in v.children"
                            :key="child._id">
                            <div style="display: flex;align-items: center;justify-content: space-between;">
                                <div>
                                    <img style="width: 20px;height:20; border-radius: 20px;" :src="child.aratar" alt="">
                                    &nbsp;&nbsp;
                                    <span>{{ child.name }}</span>
                                </div>

                                <span>{{ dayjs(child.created_at).format('YYYY-MM-DD HH:mm:ss') }}</span>
                            </div>

                            <div style="padding-left: 35px;">
                                <span>
                                    {{ child.content }}
                                </span>
                                <div style="margin-top: 10px;">
                                    <div style="display: flex;gap: 5px;">

                                        <span @click="changlikes(child._id, child.likes)"
                                            v-if="child.likes.some(flag => flag == user._id)">
                                            <img style="width: 15px;" src="../../../assets/official/点赞1.png" alt="">
                                            {{ child.likes.length }}
                                        </span>
                                        <span @click="changlikes(child._id, child.likes)" v-else>
                                            <img style="width: 15px;" src="../../../assets/official/点赞.png" alt="">
                                            {{ child.likes.length }}
                                        </span>
                                        <img style="width: 20px;" src="../../../assets/official/回复.png" alt="">
                                        <div>
                                            <p v-if="child_id == child._id" @click="clickBtn(child)">
                                                {{ child_id == child._id ? '取消回复' : '回复' }}
                                            </p>
                                            <p v-else @click="clickBtn(child)">
                                                {{ child_id !== child._id ? '回复' : '取消回复' }}
                                            </p>
                                        </div>
                                    </div>


                                    <div v-if="child_id == child._id">
                                        <div class="imgTextBox1">
                                            <textarea class="textarea" v-model="textArea" name="" id=""
                                                placeholder="输入评论"></textarea>
                                        </div>
                                        <div class="sendBox">
                                            <van-button type="primary" class="sendSubmit"
                                                @click="sendContent()">发表评论</van-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, onMounted, ref, watch, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import dayjs from 'dayjs'
import { showSuccessToast, showFailToast } from 'vant';
import { UToast } from 'undraw-ui'


console.log(dayjs)
// const status = ref(false)
const router = useRouter()
const value = ref(2.5);
const userid = ref(sessionStorage.getItem('userid'))
const user = ref(JSON.parse(sessionStorage.getItem('user')))
const messList = ref('');
const textArea = ref('')
const child_id = ref('')
const flag = ref(false)
const disabled = ref(false)
const textAreaRef = ref(null)

const props = defineProps({
    message: {
        type: Object,
    },
    getDoctorLs: {
        type: Function
    }
})

const changeStatus = async (id) => {
    console.log(user.value._id, userid.value)
    await axios.post('http://127.0.0.1:3000/upStatus', {
        id: id,
        userid: user.value._id,
        istrue: props.message.followers.some(flag => flag == user.value._id)
    })
    props.getDoctorLs()
}

const toFlag = () => {
    console.log('跳转');
    router.push({
        name: 'flagView'
    })
}
const sendContent = async () => {


    if (textArea.value) {
        let { data: { data, code } } = await axios.post('http://127.0.0.1:3000/commentAdd', {
            name: user.value.username,
            aratar: user.value.Image,
            content: textArea.value,
            userid: user.value._id,
            person: props.message._id,
            pid: child_id.value,
            level: 1
        })
        if (code == 200) {
            chatMessages()
            textArea.value = ''
            UToast({ message: '评论成功!', type: 'info' })
        } else {
            UToast({ message: '评论失败!', type: 'info' })
        }
    } else {
        UToast({ message: '不能为空，请输入内容', type: 'info' })
    }


}

const clickBtn = (item) => {
    flag.value = !flag.value

    if (flag.value) {
        child_id.value = item._id
    } else {
        child_id.value = ''
    }
}

// textarea获取焦点
const changfocus = () => {
    console.log('获取焦点')
    disabled.value = true
}
const changblur = () => {
    console.log('失去焦点')
    disabled.value = false
}

onMounted(() => {
    chatMessages()
})
let chatMessages = async () => {
    let { data: { data } } = await axios.get('http://127.0.0.1:3000/chatCom',)
    console.log(data)
    messList.value = data
}

// 点赞
const changlikes = async (id, messlikes) => {
    let { data: { data, code } } = await axios.post('http://127.0.0.1:3000/uplikes', {
        id,
        userid: user.value._id,
        islike: messlikes.some(flag => flag == user.value._id)
    })
    if (code == 200) {
        chatMessages()
    }
}

</script>

<style lang="scss" scoped>
.u7064_div {
    // height: 160px;
    border-radius: 10px 10px 0;
    background-color: #ffffff;
    margin-top: -45px;
    padding: 16px;
    box-sizing: border-box;
    position: relative;

    .u7064_div1 {
        width: 100%;

        .u1064_img {
            width: 65px;
            height: 65px;
            position: absolute;
            top: -32px;
        }

        .status {
            width: 40px;
            font-size: 12px;
            padding: 5px 10px;
            text-align: center;
            border-radius: 30px;
            color: #1677FF;
            float: right;
        }


    }

    .marg {
        margin-top: 30px;
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .u7064_div_text {
        margin-top: 16px;
        display: flex;
        gap: 15px;
    }

    .u7064_div_text2 {
        margin-top: 16px;
        display: flex;
        justify-content: space-between;
        align-items: start;

        .u7064_div_text2_1 {
            display: flex;
            gap: 5px;
            align-items: center;

        }
    }

}

.u7064_divBox2 {
    // height: 191px;
    background: inherit;
    background-color: rgb(255, 255, 255);
    border: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-top: 5px;
    padding: 16px;

    .u7064_divBox2_1 {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;

    }

    .u7064_divBox2_12 {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;

    }

    .u7064_divBox2_22 {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 30px;
        padding-top: 16px;

        .imgBox {
            width: 55px;
            height: 77px;
            line-height: 55px;

            background-image: url('https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E4%B8%BB%E9%A1%B5/u7120.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
    }



}

.imgTextBox {
    width: 100%;
    padding-bottom: 100px;
}

// .imgTextBox1 {
//     display: flex;
//     gap: 10px;
//     padding-bottom: 10px;
// }

.messageImg {
    width: 30px;
    height: 30px;
    border-radius: 25px;
}

.textarea {
    width: 100%;
    height: 70px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    box-sizing: border-box;
    resize: none;
    background-color: #f2f3f5;
}

.sendBox {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 10px;

    .sendSubmit {}

}

.contentmessage {
    padding: 10px;
    box-sizing: border-box;
    background-color: #f7f7f7;
}
</style>